<template>
	<view>
		<view class="plr40 content">
			<view class="ft24 mt10 bold">验证码登录</view>
			<view class="inputArea">
				<view class="ft16 bold">输入手机号（{{step}}/2）</view>
				<view class="bgInput radius10 plr20 mt25" v-show="step==1">
					<input type="text" class="h55" placeholder="输入手机号码" placeholder-class="placeholderStyle" />
				</view>
				<view class="mt25" v-show = "step==2">
					<uv-code-input maxlength = "4" size="65" @change="change" @finish="finish"></uv-code-input>
				</view>
			</view>
			<mix-button ref="confirmBtn" text="获取验证码" marginTop="170rpx" v-if="step==1" @onConfirm="next"></mix-button>
			<mix-button ref="confirmBtn" text="登录" marginTop="170rpx" v-else @onConfirm="login"></mix-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				step:1
			}
		},
		methods: {
			next(){
				this.step = 2;
			},
			change(e) {
				console.log('内容改变，当前值为：' + e);
			},
			finish(e) {
				console.log('输入结束，当前值为：' + e);
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #ffffff;
}
.content{
	padding-top: 150upx;
	.inputArea{
		margin-top: 220upx;
	}
	/deep/.uv-code-input{
		justify-content: space-between;
	}
	/deep/.uv-code-input__item{
		background: #F6F7FB;
		border: none!important;
		border-radius: 15upx;
	}
}
</style>
